<template>
  <div class="container">
    <data-view
      propViewKey="finance_period"
      propViewForm="finance/period/detail.vue"
      :propFlowKey="propFlowKey"
      class="data-view-inlinebtn"
      ref= "childDataView"
      :propIsTdesign="true"
      @extra-button-click="extraButtonClick"
    />

    <!--批量生成会计区间-->
    <customDrawer title="批量生成结算周期" ref="customDrawerBuild" :widthPx="360" :heightPx="360" @confirm="autoCreate" :autoHide="false">
      <template #content>
        <customForm :data="form"   :rules="rules" ref="buildForm">
          <template #content>
            <customFormItem
              label="开始日期" name="startDate" :parent="_self" :form="form"
              :type="constCommon.formItemType.datePicker.name"
              :config="{'format': 'D'}"
            />
            <customFormItem label="生成范围" name="months" :parent="_self" :form="form"
                            :type="constCommon.formItemType.selectStatic.name"
                            :config="{options: confines}"
            />
            <small style="padding-left: 50px">
              <strong>
                将按照所指定的周期，生成相关的会计区间。如：当前系统未2024年4月份，指定开始日期为2，生成范围为最近三个月，则生成数据如下：
              </strong>
              <div>
                2024-01-02 00:00:00 - 2024-02-01 23:59:59
              </div>
              <div>
                2024-02-02 00:00:00 - 2024-03-01 23:59:59
              </div>
              <div>
                2024-03-02 00:00:00 - 2024-04-01 23:59:59
              </div>
            </small>

          </template>
        </customForm>
      </template>
    </customDrawer>
  </div>
</template>

<script>

export default {
  name: 'period',
  data() {
    return {
      form: {
      },
      dateFormat: 'dd',
      confines: [ //生成的周期范围
        {
          value: 1,
          label: '最近一月'
        },
        {
          value: 3,
          label: '最近三月'
        },
        {
          value: 6,
          label: '最近半年'
        },
        {
          value: 12,
          label: '最近一年'
        },
        {
          value: 24,
          label: '最近两年'
        }
      ],
      // 校验规则
      rules: {
        startDate: [
          {
            required: true,
            message: '开始日期',
            type: 'error',
            trigger: 'blur',
          }
        ],
        months: [
          {
            required: true,
            message: '生成范围',
            type: 'error',
            trigger: 'blur',
          }
        ]
      }
    }
  },
  components: {
  },
  methods: {
    //自动生成结算周期
    autoCreate() {
      this.$refs.buildForm.validate().then((result) => {
        if (result && result == true) {
          this.utilMessage.confirm('是否生成相关结算周期', () => {
            this.utilVue.loadShow(true)
            this.$ajax.post('/finance/period/autoCreate', this.form).then(resp => {
              this.utilVue.loadHide()
              if (resp.success) {
                this.utilMessage.success(resp.msg)
                this.$refs.childDataView.fetchData()
                this.$refs.customDrawerBuild.hide()
              }
            })
          })
        }
      })
    },
    extraButtonClick(para) {
      let {key: buttonKey} = para.button
      if (buttonKey == 'batchBuild') { // 批量生成
        this.$refs.customDrawerBuild.show()
      }
    }
  },
  props: ['propFlowKey']
}
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;
    background-color: #fff;
    /deep/ .el-form-item{
      margin-bottom:  0px;
    }
  }
</style>
